<!doctype>
<html>
<head>
  <title>How to consume a JSON request</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script type="application/javascript">
    function performSubmit(responseAs) {
      var arrNames = [];

      $("[name=names]").each(function() {
         arrNames.push($(this).val());
      });

      var params = {
        counter: $("[name=counter]").val(),
        names: arrNames
      };

      var acceptHeader = 'application/json';
      if (responseAs === 'html') {
        acceptHeader = 'text/html';
      }

      $.ajax({
        url: 'consume.action',
        type: 'POST',
        data: JSON.stringify(params),
        headers: {
          Accept: acceptHeader,
          "Content-Type": "application/json; charset=UTF-8"
        },
        dataType: 'json'
      })
      .always(function (data) {
        $("#response").text(JSON.stringify(data));
      });
    }
  </script>
</head>

<body>
<form>
  <div>Counter: <input type="number" name="counter"></div>
  <div>Name 1: <input type="text" name="names"></div>
  <div>Name 2: <input type="text" name="names"></div>
  <button type="button" onclick="performSubmit('json'); return false;">Submit as JSON, response as JSON</button>
  <button type="button" onclick="performSubmit('html'); return false;">Submit as JSON, response as HTML</button>
</form>

<textarea rows="20" cols="60" id="response"></textarea>
</body>
</html>
